<template>
    <div>
       <!-- 面包屑 -->
        <el-breadcrumb separator=">">
            <el-breadcrumb-item >{{$t('订阅')}}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/subscribe/price' }">{{$t('订阅管理')}}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <div class="price-card" >
            <div class="price-card-title">{{$t('订阅管理')}}</div>
            <el-divider></el-divider>
            <div class="price-card-subtitle">{{$t('选择价格方案')}}</div>
            <!-- 开关 -->
           <div style="display: flex;">
            <div style="min-width: 80%;"></div>
            <div style="display: flex;width: 20%;">
                <div v-if="value1" class="switch-choice" style="margin: 1rem 0 0 0rem;">{{$t('按月')}}</div>
                <div v-else class="switch-choice" style="margin: 1rem 0 0 0rem;color: #165DFF;">{{$t('按月')}}</div>
                <div style="margin: 0.6rem 0 0 0.5rem;">
                    <el-switch v-model="value1" style="--el-switch-on-color: #165DFF;"></el-switch>
                </div>
                <div v-if="value1" class="switch-choice" style="margin: 1rem 0 0 -0.6rem;color: #165DFF;">{{$t('按年')}}</div>
                <div v-else class="switch-choice" style="margin: 1rem 0 0 -0.6rem;">{{$t('按年')}}</div>
            </div>
           </div>
           <!--加载中 -->
           <div v-show="!isStats" v-loading="true" element-loading-text="Loading..." style="width: 8rem;height: 7rem;position: absolute;left: 50%;top: 50%;border-radius: 0.5rem;"></div>
            <!-- 按月 -->
            <div v-show="isStats" v-if="!value1" style="display: flex;width: 100%;justify-content: center;">
                    <!-- <div style="min-width: 14%;"></div> -->
                    <!--卡片 29 -->
                    <div class="plan-card" style="margin: 1rem 0 3rem 0rem;" v-show="planList[0].is_valid">
                        <div style="display: flex;">
                            <div class="blue-box">
                                <img style="width: 2.5rem;height: 2.5rem;margin: 1.2rem;" src="../assets/img/icon/plan1.svg" />
                            </div>
                            <div class="plan-card-price" >{{planList[0].monthly}}</div>
                            <div class="plan-card-unit">/{{ $t('月') }}</div>
                        </div>
                        <div class="plan-name">{{ planList[0].name}}</div>
                        <div class="plan-des">{{ $t('订阅方案1.描述') }}</div>
                        <el-button class="plan-btn show" @click="show(0)">{{ $t('订阅按钮文字') }}</el-button>
                        <!-- <el-divider></el-divider> -->
                        <div class="plan-get" style="width: 16.25rem;margin-top: 1rem;">{{ $t('订阅主要优势1') }}</div>
                        <div style="display: flex;margin-top: 0.3rem;">
                            <div>
                                <img style="margin-top: 0.3rem;width: 1.25rem;height: 1.25rem;" src="../assets/img/icon/success.svg" />
                            </div>
                            <div class="plan-get" style="width: 14.69rem;margin-left: 0.31rem;margin-top: 0;">{{ $t('订阅方案1市场分析') }}</div>
                        </div>
                        <div class="plan-get-des">{{ $t('订阅方案1描述') }}</div>
                        <div class="plan-foot-word" style="margin-top: 6.6rem;">{{ $t('订阅底部文字') }}</div>
                    </div>
                    <div style="min-width: 5%;"></div>
                    <!-- 299 -->
                    <div class="plan-card" style="margin: 1rem 0 3rem 0rem;" v-show="planList[1].is_valid">
                        <div style="display: flex;">
                            <div class="blue-box">
                                <img style="width: 2.5rem;height: 2.5rem;margin: 1.2rem;" src="../assets/img/icon/plan2.svg" />
                            </div>
                            <div class="plan-card-price" >{{planList[1].monthly}}</div>
                            <div class="plan-card-unit">/{{ $t('月') }}</div>
                        </div>
                        <div class="plan-name">{{planList[1].name}}</div>
                        <div class="plan-des">{{ $t('订阅方案2.描述') }}</div>
                        <el-button class="plan-btn show" @click="show(1)" style="background-color:#fff;color:#165DFF;border: 0.06rem solid #165DFF;">{{ $t('订阅按钮文字') }}</el-button>
                        <!-- <el-divider></el-divider> -->
                        <div class="plan-get" style="width: 16.25rem;margin-top: 1rem;">
                            <span>{{ $t('订阅主要优势2.all') }}</span>
                            <span style="font-weight: 600;">{{ $t('订阅主要优势2.Starter') }}</span>
                            <span>{{ $t('订阅主要优势2.last') }}</span>
                        </div>
                        <div style="display: flex;margin-top: 0.3rem;">
                            <div>
                                <img style="margin-top: 0.3rem;width: 1.25rem;height: 1.25rem;" src="../assets/img/icon/success.svg" />
                            </div>
                            <div class="plan-get" style="width: 16.25rem;margin-left: 0.31rem;margin-top: 0;">{{ $t('订阅方案2ShopifyStore') }}</div>
                        </div>
                        <div class="plan-get-des">{{ $t('订阅方案2ShopifyStore.描述') }}</div>
                        <div style="display: flex;margin-top: 0.1rem;">
                            <div>
                                <img style="margin-top: 0.3rem;width: 1.25rem;height: 1.25rem;" src="../assets/img/icon/success.svg" />
                            </div>
                            <div class="plan-get" style="width: 16.25rem;margin-left: 0.31rem;margin-top: 0;">{{ $t('订阅方案2AliExpressStore') }}</div>
                        </div>
                        <div class="plan-get-des">{{ $t('订阅方案2AliExpressStore.描述') }}</div>
                        <div class="plan-foot-word">{{ $t('订阅底部文字') }}</div>
                    </div>
                    <div style="min-width: 5%;"></div>
                    <!-- 299999 -->
                    <div class="plan-card" style="margin: 1rem 7rem 3rem 0rem;" v-show="planList[2].is_valid">
                        <div style="display: flex;">
                            <div class="blue-box">
                                <img style="width: 2.5rem;height: 2.5rem;margin: 1.2rem;" src="../assets/img/icon/plan3.svg" />
                            </div>
                            <div class="plan-card-price" >{{planList[2].monthly}}</div>
                            <div class="plan-card-unit">/{{ $t('月') }}</div>
                        </div>
                        <div class="plan-name">{{ planList[2].name }}</div>
                        <div class="plan-des">{{ $t('订阅方案3.描述') }}</div>
                        <el-button class="plan-btn show" @click="show(2)" style="background-color:#fff;color:#165DFF;border: 0.06rem solid #165DFF;">{{ $t('订阅按钮文字') }}</el-button>
                        <!-- <el-divider></el-divider> -->
                        <div class="plan-get" style="width: 16.25rem;margin-top: 1rem;">
                            <span>{{ $t('订阅主要优势2.all') }}</span>
                            <span style="font-weight: 600;">{{ $t('订阅方案2.名称') }}</span>
                            <span>{{ $t('订阅主要优势2.last') }}</span>
                        </div>
                        <div style="display: flex;margin-top: 0.3rem;">
                            <div>
                                <img style="margin-top: 0.3rem;width: 1.25rem;height: 1.25rem;" src="../assets/img/icon/success.svg" />
                            </div>
                            <div class="plan-get" style="width: 16.25rem;margin-left: 0.31rem;margin-top: 0;">{{ $t('订阅方案3eBayStore') }}</div>
                        </div>
                        <div class="plan-get-des">{{ $t('订阅方案3eBayStore.描述') }}</div>
                        <div style="display: flex;margin-top: 0.1rem;">
                            <div>
                                <img style="margin-top: 0.3rem;width: 1.25rem;height: 1.25rem;" src="../assets/img/icon/success.svg" />
                            </div>
                            <div class="plan-get" style="width: 16.25rem;margin-left: 0.31rem;margin-top: 0;">{{ $t('订阅方案3AmazonStore') }}</div>
                        </div>
                        <div class="plan-get-des">{{ $t('订阅方案3AmazonStore.描述') }}</div>
                        <div class="plan-foot-word">{{ $t('订阅底部文字') }}</div>
                    </div>
            </div>
            <!-- 按年 -->
            <div v-else style="display: flex;width: 100%;justify-content: center;">
                <!-- <div style="min-width: 12%;"></div> -->
                <!--卡片 29 -->
                <div class="plan-card" style="margin: 1rem 0 3rem 0rem;" v-show="planList[0].is_valid">
                    <div style="display: flex;">
                        <div class="blue-box">
                            <img style="width: 2.5rem;height: 2.5rem;margin: 1.2rem;" src="../assets/img/icon/plan1.svg" />
                        </div>
                        <div class="plan-card-price" >{{planList[0].yearly}}</div>
                        <div class="plan-card-unit">/{{ $t('年') }}</div>
                    </div>
                    <div class="plan-name">{{ planList[0].name}}</div>
                    <div class="plan-des">{{ $t('订阅方案1.描述') }}</div>
                    <el-button class="plan-btn show" @click="show(0)">{{ $t('订阅按钮文字') }}</el-button>
                    <!-- <el-divider></el-divider> -->
                    <div class="plan-get" style="width: 16.25rem;margin-top: 1rem;">{{ $t('订阅主要优势1') }}</div>
                    <div style="display: flex;margin-top: 0.3rem;">
                        <div>
                            <img style="margin-top: 0.3rem;width: 1.25rem;height: 1.25rem;" src="../assets/img/icon/success.svg" />
                        </div>
                        <div class="plan-get" style="width: 16.25rem;margin-left: 0.31rem;margin-top: 0;">{{ $t('订阅方案1市场分析') }}</div>
                    </div>
                    <div class="plan-get-des">{{ $t('订阅方案1描述') }}</div>
                    <div class="plan-foot-word" style="margin-top: 6.6rem;">{{ $t('订阅底部文字') }}</div>
                </div>
                <div style="min-width: 4%;"></div>
                <!-- 299 -->
                <div class="plan-card" style="margin: 1rem 0 3rem 0rem;" v-show="planList[1].is_valid">
                    <div style="display: flex;">
                        <div class="blue-box">
                            <img style="width: 2.5rem;height: 2.5rem;margin: 1.2rem;" src="../assets/img/icon/plan2.svg" />
                        </div>
                        <div class="plan-card-price" style="">{{planList[1].yearly}}</div>
                        <div class="plan-card-unit">/{{ $t('年') }}</div>
                    </div>
                    <div class="plan-name">{{planList[1].name}}</div>
                    <div class="plan-des">{{ $t('订阅方案2.描述') }}</div>
                    <el-button class="plan-btn show" @click="show(1)" style="background-color:#fff;color:#165DFF;border: 0.06rem solid #165DFF;">{{ $t('订阅按钮文字') }}</el-button>
                    <div class="plan-get" style="width: 16.25rem;margin-top: 1rem;">
                        <span>{{ $t('订阅主要优势2.all') }}</span>
                        <span style="font-weight: 600;">{{ $t('订阅主要优势2.Starter') }}</span>
                        <span>{{ $t('订阅主要优势2.last') }}</span>
                    </div>
                    <div style="display: flex;margin-top: 0.3rem;">
                        <div>
                            <img style="margin-top: 0.3rem;width: 1.25rem;height: 1.25rem;" src="../assets/img/icon/success.svg" />
                        </div>
                        <div class="plan-get" style="width: 16.25rem;margin-left: 0.31rem;margin-top: 0;">{{ $t('订阅方案2ShopifyStore') }}</div>
                    </div>
                    <div class="plan-get-des">{{ $t('订阅方案2ShopifyStore.描述') }}</div>
                    <div style="display: flex;margin-top: 0.1rem;">
                        <div>
                            <img style="margin-top: 0.3rem;width: 1.25rem;height: 1.25rem;" src="../assets/img/icon/success.svg" />
                        </div>
                        <div class="plan-get" style="width: 16.25rem;margin-left: 0.31rem;margin-top: 0;">{{ $t('订阅方案2AliExpressStore') }}</div>
                    </div>
                    <div class="plan-get-des">{{ $t('订阅方案2AliExpressStore.描述') }}</div>
                    <div class="plan-foot-word">{{ $t('订阅底部文字') }}</div>
                </div>
                <div style="min-width: 4%;"></div>
                <!-- 299999 -->
                <div class="plan-card" style="margin: 1rem 7rem 3rem 0rem;" v-show="planList[2].is_valid">
                    <div style="display: flex;">
                        <div class="blue-box">
                            <img style="width: 2.5rem;height: 2.5rem;margin: 1.2rem;" src="../assets/img/icon/plan3.svg" />
                        </div>
                        <div class="plan-card-price" >{{planList[2].yearly}}</div>
                        <div class="plan-card-unit">/{{ $t('年') }}</div>
                    </div>
                    <div class="plan-name">{{ planList[2].name }}</div>
                    <div class="plan-des">{{ $t('订阅方案3.描述') }}</div>
                    <el-button class="plan-btn show" @click="show(2)" style="background-color:#fff;color:#165DFF;border: 0.06rem solid #165DFF;">{{ $t('订阅按钮文字') }}</el-button>
                    <!-- <el-divider></el-divider> -->
                    <div class="plan-get" style="width: 16.25rem;margin-top: 1rem;">
                        <span>{{ $t('订阅主要优势2.all') }}</span>
                        <span style="font-weight: 600;">{{ $t('订阅方案2.名称') }}</span>
                        <span>{{ $t('订阅主要优势2.last') }}</span>
                    </div>
                    <div style="display: flex;margin-top: 0.3rem;">
                        <div>
                            <img style="margin-top: 0.3rem;width: 1.25rem;height: 1.25rem;" src="../assets/img/icon/success.svg" />
                        </div>
                        <div class="plan-get" style="width: 16.25rem;margin-left: 0.31rem;margin-top: 0;">{{ $t('订阅方案3eBayStore') }}</div>
                    </div>
                    <div class="plan-get-des">{{ $t('订阅方案3eBayStore.描述') }}</div>
                    <div style="display: flex;margin-top: 0.1rem;">
                        <div>
                            <img style="margin-top: 0.3rem;width: 1.25rem;height: 1.25rem;" src="../assets/img/icon/success.svg" />
                        </div>
                        <div class="plan-get" style="width: 16.25rem;margin-left: 0.31rem;margin-top: 0;">{{ $t('订阅方案3AmazonStore') }}</div>
                    </div>
                    <div class="plan-get-des">{{ $t('订阅方案3AmazonStore.描述') }}</div>
                    <div class="plan-foot-word">{{ $t('订阅底部文字') }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
  
  <script>
  import {getReserve} from '../apis/reserve'
  import { buttonClick } from '../util/buttonClick';
  export default {
    name: 'MyComponent',
   data(){
    return {
        isStats:false,
        value1:false,
        planList:[
            {
                "name": "start",
                "yearly": "0",
                "monthly": "0",
                "url": "https://wa.me/+447561029850?text=Hello",
                "is_valid":1,
            },
            {
                "name": "pro",
                "yearly": "0",
                "monthly": "0",
                "url": "https://wa.me/+447561029850?text=Hello"
            },
            {
                "name": "Enterprise",
                "yearly": "0",
                "monthly": "0",
                "url": "https://wa.me/+447561029850?text=Hello"
            },
        ],
    }
   },
   created(){
    // this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
   },
   mounted(){
    this.getPricePlan()
    // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
    this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
   },
   methods:{
    getPricePlan(){
        getReserve().then((res)=>{
            if(res.code == 200 && res.status == 1){
                this.planList = []
                for(let i in res.data.lists){
                    this.planList.push(res.data.lists[i])
                    // 取整
                    // this.planList[i].monthly =parseInt(this.planList[i].monthly)
                    // this.planList[i].yearly =parseInt(this.planList[i].yearly)
                }
                this.isStats = true
                // console.log(this.planList[1].monthly)
            }
        })
    },
     show(i){
       // 本页改变
       // window.location.href = this.planList[i].url;
       // 跳转新标签页
       window.open(this.planList[i].url, '_blank');
       const pagePath = window.location.href; // 当前页面 URL
       const buttonName = "whatsapp" // 按钮名称  this.planList[i].name
       buttonClick(pagePath, buttonName);
       // window.open('https://wa.me/+447561029850?text=Hello', '_blank');
    },
   },
  }
  </script>
  
  <style lang="scss" scoped>
  .price-card{
    margin: 1rem 0 0 0;
    padding: 1rem;
    box-sizing: border-box;
    min-width: 75rem;
    height: 52.5rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
    .price-card-title{
        width: 19.38rem;
        height: 1.88rem;
        line-height: 1.88rem;
        color: rgba(16, 16, 16, 1);
        font-size: 1.25rem;
        font-weight: 600;
        text-align: left;
        font-family: AlibabaPuHui-medium;
    }
    .price-card-subtitle{
        margin: 2rem 1rem 1rem 1rem;
        min-width: 72.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        color: rgba(16, 16, 16, 1);
        font-size: 1.25rem;
        font-weight: 600;
        text-align: center;
        font-family: AlibabaPuHui-bold;
    }
    .switch-choice{
        width: 3.75rem;
        height: 1.25rem;
        color: rgba(16, 16, 16, 1);
        font-size: 0.88rem;
        text-align: right;
        font-family: AlibabaPuHui-regular;
    }
    .plan-card{
        padding: 1rem;
        box-sizing: border-box;
        min-width: 18.75rem;
        // min-height: 28.75rem;
        max-height: 34.8rem;
        border-radius: 1.25rem;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(0, 0, 0, 0.4);
        .blue-box{
            width: 5rem;
            height: 5rem;
            line-height: 1.25rem;
            border-radius: 0.63rem;
            background-color: rgba(238, 244, 248, 1);
            text-align: center;
        }
        .plan-card-price{
            margin: 0 0 0 1rem;
            max-width: 7.85rem;
            height: 5rem;
            line-height: 5rem;
            color: rgba(22, 93, 255, 1);
            font-size: 1.88rem;
            font-weight: 600;
            text-align: left;
            font-family: AlibabaPuHui-bold;
        }
        .plan-card-unit{
            margin: 2rem 0 0 0;
            width: 3.44rem;
            height: 1.88rem;
            color: rgba(16, 16, 16, 1);
            font-size: 0.88rem;
            text-align: left;
            font-family: AlibabaPuHui-regular;
        }
        .plan-name{
            margin: 1rem 0 0 0;
            width: 16.25rem;
            height: 1.88rem;
            line-height: 1.88rem;
            color: rgba(16, 16, 16, 1);
            font-size: 1.25rem;
            font-weight: 600;
            text-align: left;
            font-family: AlibabaPuHui-bold;
        }
        .plan-des{
            margin-top: 0.3rem;
            width: 17.5rem;
            height: 3.13rem;
            color: rgba(16, 16, 16, 1);
            font-size: 0.75rem;
            text-align: left;
            font-family: AlibabaPuHui-regular;
        }
        .plan-btn{
            margin-top: 0.6rem;
            width: 16.25rem;
            height: 3.13rem;
            line-height: 1.25rem;
            border-radius: 5.63rem;
            background-color: rgba(22, 93, 255, 1);
            color:#fff;
            font-size: 0.88rem;
            text-align: center;
            font-family: Roboto;
        }
        .plan-get{
            margin-top: 0.6rem;
            height: 1.88rem;
            line-height: 1.88rem;
            color: rgba(16, 16, 16, 1);
            font-size: 0.88rem;
            text-align: left;
            font-family: AlibabaPuHui-regular;
        }
        .plan-get-des{
            margin-left: 2rem;
            margin-top: 0.3rem;
            width: 14.69rem;
            height: 3.75rem;
            color: rgba(134, 144, 156, 1);
            font-size: 0.75rem;
            text-align: left;
            font-family: AlibabaPuHui-regular;
        }
        .plan-foot-word{
            margin-top: 0.5rem;
            width: 16.25rem;
            height: 1.88rem;
            line-height: 1.88rem;
            border-radius: 0.31rem;
            background-color: rgba(236, 245, 255, 1);
            color: rgba(78, 89, 105, 1);
            font-size: 0.75rem;
            text-align: center;
            font-family: Roboto;
        }
    }
  }
  /* el-divider 修改高度效果 */
.el-divider--horizontal{
     margin: 1rem 0;
    //  background: 0 0;
     border-top: 0.1rem solid #f2f3f5;
 }
  </style>